<template lang="html">
    <div>
        <el-row>
            <el-col >配置管理</el-col>
        </el-row>
        <el-row type="flex">
            <el-col :offset="15" :span="2" align="center" >
                <el-button type="success" size="mini" @click="showAdd=true">新增</el-button>
            </el-col>
        </el-row>
        <el-row type="flex">
            <el-col :offset="2" :span="20">
                <el-table :data="data">
                    <el-table-column prop="id" label="序号" width="80" align="center"/>
                    <el-table-column prop="type" label="类型" width="80" align="center"/>
                    <el-table-column prop="key" label="key" width="80" align="center"/>
                    <el-table-column prop="value" label="值" width="180" align="center"/>
                    <el-table-column prop="status" :formatter="showStatus" label="状态" width="50" align="center"/>
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="slot">
                            <el-button size="mini" @click="showUpdate=true;config = slot.row;" type="warning">更新</el-button>
                            <el-button size="mini" @click="deleteConfig(slot.row.id)" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="getData"></el-pagination>
            </el-col>
        </el-row>   
        <!-- 添加配置弹出框 -->
        <el-dialog title="添加配置" :visible.sync="showAdd">
            <el-form :model="config">
              <el-form-item label="类型:" label-width="120px">
                <el-input v-model="config.type" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="key:" label-width="120px">
                <el-input v-model="config.key" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="值:" label-width="120px">
                <el-input v-model="config.value" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="showAdd = false">取 消</el-button>
              <el-button type="primary" @click="addConfig">确 定</el-button>
            </div>
        </el-dialog>

            <!-- 更新配置弹出框 -->
        <el-dialog title="更新配置" :visible.sync="showUpdate">
            <el-form :model="config">
                <el-input v-model="config.id" type="hidden"></el-input>
              <el-form-item label="类型:" label-width="120px">
                <el-input v-model="config.type" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="key:" label-width="120px">
                <el-input v-model="config.key" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="值:" label-width="120px">
                <el-input v-model="config.value" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="状态:" label-width="120px">
                <el-select v-model="config.status" value-key="value" placeholder="请选择状态" label-width="120px">
                    <el-option label="可用" :value="1" key="1"></el-option>
                    <el-option label="禁用" :value="0" key="0"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="showUpdate = false">取 消</el-button>
              <el-button type="primary" @click="updateConfig">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>

export default {

    data() {
        return {
            data:[
                {id:1,type:'sys',key:'version',value:'v1.0.0',status:1},
                {id:2,type:'sys',key:'role',value:'admin',status:1},
                {id:3,type:'sys',key:'email',value:'test@test.com',status:1},
                {id:4,type:'sys',key:'name',value:'测试管理',status:0}
            ],
            showAdd:false,
            showUpdate:false,
            config:{},
            rows:8,
            total:100
        }
    },
    methods: {
        getData(page){
            this.$http.get("/rest/config/list",{params:{page:page,rows:this.rows}})
            .then(resp=>{
                this.data = resp.result.data;
            })
        },
        showStatus(row){
            return row.status==1?'可用':'禁用';
        },
        deleteConfig(id){
            this.$confirm('确定是要删除这项配置吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消'
            }).then(()=>{
                console.log(id);//执行后台删除
                this.$message({
                    type:'info',
                    message:'删除成功'
                })
            }).catch(()=>{

            })
        },
        addConfig(){
            //执行添加操作
            console.log(this.config);
            this.showAdd = false;
        },
        updateConfig(){
            console.log(this.config);
            this.showUpdate = false;
        }
    },
    mounted() {
        // let name = this.$route.query.name;
        console.log(this.$route);
    },
}
</script>
<style lang="css">
    .config-box{
        padding-left: 5px;
    }
</style>